<template>
  <div class="all">
    <Nav :leftShow="left_show" :leftName="left_name" :rightName="right_name" :titleName="title_name">
    </Nav>
    <div class="time">
      <van-count-down :time="time">
        <template #default="timeData">
          <p>支付剩余时间</p>
          <div class="time1">
            <span class="block">{{ timeData.hours }}</span>
            <span class="colon">:</span>
            <span class="block">{{ timeData.minutes }}</span>
            <span class="colon">:</span>
            <span class="block">{{ timeData.seconds }}</span>
          </div>
        </template>
      </van-count-down>
    </div>
    <div class="choose">
      <p>选择支付方式</p>
    </div>
    <div class="pay">
      <van-radio-group v-model="radio">
        <div class="wechat">
          <i class="iconfont icon-zhifubao"></i>
          <span class="type">支付宝</span>
          <van-radio name="1" checked-color="#07c160" icon-size="24px"></van-radio>
        </div>
        <div class="wechat">
          <i class="iconfont icon-weixin"></i>
          <span class="type">
            微信
          </span>
          <van-radio name="2" checked-color="#07c160" icon-size="24px"></van-radio>
        </div>
      </van-radio-group>
    </div>
    <van-button type="primary" size="large" class="pay1" @click="clickAction">确认支付</van-button>
  </div>
</template>
<script>
  import Nav from "@/components/Nav.vue";
  export default {
    name: "getorder",
    data() {
      return {
        left_show: false,
        left_name: '空',
        title_name: '在线支付',
        right_name: '',
        time: 15 * 60 * 1000,
        radio: '1',
      };
    },
    components: {
      Nav,
    },
    methods: {
      clickAction() {
        this.$router.push({ name: 'Menu' })
      }
    },
  }
</script>
<style lang="less" scoped>
  .all {
    background-color: rgb(245, 245, 245);
    margin-top: 44px;
  }

  .time {
    width: 100%;
    height: 140px;
    background-color: white;
  }

  .time p {
    text-align: center;
    font-size: 14px;
    padding-top: 35px;
  }

  .choose {
    padding: 10px;
    color: rgb(85, 85, 85);
  }

  .time1 {
    margin-top: 20px;
    text-align: center;
    font-size: 40px;
  }

  .wechat {
    display: flex;
    justify-content: space-between;
    width: 100%;
    background-color: white;
    display: flex;
    justify-content: space-between;
  }

  .icon-zhifubao {
    color: rgb(0, 169, 242);
    font-size: 45px;
    margin: 15px;
  }

  .icon-weixin {
    color: rgb(59, 180, 48);
    font-size: 45px;
    margin: 15px;
  }

  .type {
    margin-left: -230px;
    margin-top: 30px;
  }

  .van-radio {
    margin-right: 20px;
  }

  .pay1 {
    background-color: rgb(76, 217, 100);
    border: 0;
    margin-top: 10px;
    width: 90%;
    margin-left: 5%;
    line-height: 40px;
    height: 40px;
    border-radius: 5px;
  }
</style>